<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物流信息</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
         <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
     <style>
          .bg-white{
              background-color: #fff;
          }
           .order-box{
               font-size: 0.8rem;
               line-height: 1.2rem;
               padding-left: 0.2rem;
           }
          .order-item{
              width: 100%;
              color:#151516;
              font-size: 0.6rem;
          }
          .wuliu{
                padding-left: 0.5rem;
              }
          .wuliu-item{
              position: relative;
              padding: 0.5rem 0;
              line-height: 1.2rem;
          }
          .wuliu-item-content{
              display: inline-block;
              vertical-align: middle;
              font-size: 0.7rem;
              width: 12rem;
          }
          .wuliu-item-content .dyntime{
              color:#f1c40f;
          }
          .item-flag{
              display: inline-block;
              width: 0.7rem;
              height: 0.7rem;
               margin-left: 0.5rem;
               border-radius: 0.5rem;
          }
          .color-hui{
               background: #dfdfdf;
              z-index: 2;
          }
          .color-now{
              background:#f1c40f;
          }
          .cd-timeline{
              position: relative;
              padding: 1rem 0 0;
               margin-bottom: 1rem;
          }
          .cd-timeline::before {
              /* this is the vertical line */
              content: '';
              position: absolute;
              top: 0;
              left: 0.8rem;
              height: 100%;
              width: 0.1rem;
              background: #dfdfdf;
          }
      </style>
    </head>
    <body>
    <div id="wl-box">
    <div class="aui-content  bg-white" >
        <div class="aui-info">
            <span class="aui-info-item aui-padded-l-5 aui-font-size-16">物流信息</span>
         </div>
        <div class="aui-hr"></div>
         <ul class="order-box">
                <li class="order-item">订单编号：<span>{{orderdetail.orderno}}</span></li>
                  <li class="order-item">物流公司：<span>{{orderdetail.companyname}}</span></li>
                <li class="order-item">支付方式：<span>{{paymap[orderdetail.pay_type]}}</span></li>
                <li class="order-item">下单时间：<span>{{orderdetail.create_time_fmt}}</span></li>
         </ul>

    </div>
    <div class="wuliu aui-margin-t-10 bg-white">
        <ul class="wuliu cd-timeline">
            <li class="wuliu-item" v-for="item in wuliu">
                <span class="item-flag color-now"></span>
                <div class="wuliu-item-content">
                    <div class="dyntime">{{item.datetime}}</div>
                    <div class="dyntxt">{{item.remark}}</div>
              </div>
            </li>
         </ul>
    </div>
    </div>
    <script language="javascript">


        var vm = new Vue({
            el: '#wl-box',
            data: {
                token:'',
                orderid:'',
                orderdetail:{},
                paymap:{
                    'weixin':'微信'
                },
                wuliu:[],
             },
            methods: {

                load_init:function () {

                    $page.get_data('/api/order/getWuliu', 'get',{token:this.token,id:this.orderid},function (ret) {
                        vm.orderdetail = ret.data;
                        vm.wuliu = ret.data.traceinfo.data;
                    });
                }
            }
        });
        apiready=function(){
          pageParam = api.pageParam;
          vm.token = $api.getStorage('token');
          vm.orderid = pageParam.id;

          vm.load_init();
        }


    </script>
    </body>
    </html>
